<template>
    <div class="readHistory-page">
      <GhNavBar title="阅读历史"   rightText="清空历史" @click-right="clickRight" />
      <div class="content-box">
         <van-empty style="margin-top: 120px;" v-if="readHistoryList.length===0"  description="暂无浏览历史" />
        <div v-else>
           <div class="news-item"  v-for="item in readHistoryList" :key="readHistoryList.id">
             <router-link :to="`/detail/${item.article_id}`">
               <div class="img-box">
                <!-- v-lazy:vant组件库自带的图片懒加载 -->
                <img v-if="item.picture&&item.picture.length>0" v-lazy="item.picture" alt="" >
               </div>
               <div class="content">
                  <div class="title1">{{item.title}}</div>
                  <div class="buttom">
                    <div class="desc">{{item.author}}</div>
                    <div class="date">{{getTimeDifference(item.looktime)}}</div>
                  </div>
               </div>
             </router-link>
           </div>
         </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import {ref,reactive,onMounted,onBeforeMount,computed,onBeforeUnmount,onUpdated} from "vue"
  import{useRouter,useRoute}from 'vue-router'
  const router =useRouter();  
  const route =useRoute()
  import { Toast, Dialog } from 'vant';
  import 'vant/es/toast/style'
  import Item from '../Article/components/Item.vue'
  import {queryNewsStory,IsFavorite,queryReadHistory,delAllReadHistory} from '@/services/article'
  import{getArticleByid} from '@/services/consultant'
  import{getconsultantInfoByName,getuseridByaccount} from '@/services/others'
  import { useUserStore ,useArticleStore} from '@/stores'
  import GhNavBar from '@/components/gh-nav-bar.vue'

  //用户的id数据
  const userId=ref('')
  //阅读历史的记录
  const readHistoryList=ref([])

//清空历史记录
const clickRight=async()=>{
  await Dialog.confirm({
    title: '温馨提示',
    message: '您确认要清空历史记录吗？'
  }) 
  .then(async() => {
     const res=await  delAllReadHistory(userId.value).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    })
//    console.log(res)
    if(res.status!==201){
      if(res.response.status==402){
         const toastMessage=res.response.data.error
         Toast.fail(toastMessage)
         isRegistering.value=false;
         return
      }
      if(res.response.status==404){
         const toastMessage=res.response.data.error
         Toast.fail(toastMessage)
        isRegistering.value=false;
         return
       }
     }
     Toast.success('清空历史成功！')
     window.location.reload()
  })
  .catch((error)=>{
    Toast('取消操作')
  })



}

  onBeforeMount(async()=>{
    const account=JSON.parse(localStorage.getItem('gh-user')).user.userData.account
    const user_id=await getuseridByaccount(account)
    userId.value=user_id.data.id
    const res=await queryReadHistory(userId.value)
    // console.log(res.data)
    readHistoryList.value=res.data
  })
  function getTimeDifference(dateString) {
    const targetDate = new Date(dateString);
    const currentDate = new Date();
    const timeDifference = currentDate - targetDate;
    const secondsDifference = timeDifference / 1000;
    if (secondsDifference < 60) {
        return `刚刚`;
    }
    else if (secondsDifference < 3600) {
        const minutes = Math.floor(secondsDifference / 60);
        return `${minutes}分钟前`;
    } else if (secondsDifference < 86400) {
        const hours = Math.floor(secondsDifference / 3600);
        return `${hours}小时前`;
    } else if (secondsDifference < 604800) {
        const days = Math.floor(secondsDifference / 86400);
        return `${days}天前`;
    } else if (secondsDifference < 2629743) {
        const weeks = Math.floor(secondsDifference / 604800);
        return `${weeks}周前`;
    } else if (secondsDifference < 31556926) {
        const months = Math.floor(secondsDifference / 2629743);
        return `${months}个月前`;
    } else {
        const years = Math.floor(secondsDifference / 31556926);
        return `${years}年前`;
    }
}
  </script>
  
  <style lang="scss" scoped>
  .readHistory-page{
     width: 100%;
     .content-box{
         width: 100%;
         margin-top: 40px;
         padding: 0 10px;
         .news-item{
            box-sizing: border-box;
            position: relative;
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            height: 95px;
            width: 100%;
            /* background: black; */
            overflow: hidden;
        
            a{
                display: flex;
                justify-content: space-between;
                width: 100%;
                .img-box{
                    position: absolute;
                    right: 0;
                    top: 15px;
                    width: 65px;
                    height: 65px;
                    background: #d5d5d5;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                        border-radius: 10px;
                    }
                }
                .content{
                    height: 100%;
                    width: 80%;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    .title1{
                        max-height: 50px;
                        line-height: 20px;
                        font-size: 16px;
                        overflow: hidden;
                        color: var(--gh-price);
                        font-family: '宋体';
                   }
                   .buttom{
                       display: flex;
                       justify-content: space-between;
                       font-size: 12px;
                        color: var(--gh-text3);
                     .desc{
                        line-height: 12px;
                        font-family: '黑体';
                      }
                      .date{
                        margin-right: 15px;
                        line-height: 12px;
                        font-family: '黑体';
                      }
                   }
                   
                }
               
            }
        
        }
     }
  }
  
  </style>
  